import React from "react";
import "./style.css";
import { Swiper, Skeleton, List } from "react-vant";
import axios from "axios";
import ListItem from "../../components/listItem";
class Index extends React.Component {
  state = {
    list: new Array(10).fill(1),
    loading: true,
    pageCode: 1,
    pageSize: 10
  };
  fetchList = async () => {
    const { pageSize, pageCode, list } = this.state
    const resp = await axios.get("/api/list/", { params:  { pageSize, pageCode } });
    this.setState({
      list: pageCode === 1 ? resp.data.data : [...list, ...resp.data.data],
      loading: false,
      pageCode: pageCode + 1
    });
  };
  render() {
    const { list, loading } = this.state;
    return (
      <div>
        {/* 头部吸顶 */}
        <div className="header">头部</div>
        {/* 轮播 */}
        <Swiper>
          <Swiper.Item>
            <img
              src="https://img.yzcdn.cn/vant/apple-1.jpg"
              alt=""
              className="banner"
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src="https://img.yzcdn.cn/vant/apple-2.jpg"
              alt=""
              className="banner"
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src="https://img.yzcdn.cn/vant/apple-3.jpg"
              alt=""
              className="banner"
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src="https://img.yzcdn.cn/vant/apple-4.jpg"
              alt=""
              className="banner"
            />
          </Swiper.Item>
          <Swiper.Item>
            <img
              src="https://img.yzcdn.cn/vant/apple-5.jpg"
              alt=""
              className="banner"
            />
          </Swiper.Item>
        </Swiper>
        {/* 列表渲染 */}
        <List className="list" onLoad={this.fetchList}>
          {list.map((v, i) => {
            return (
              <Skeleton loading={loading} key={i} title style={{ marginBottom: 10 }}>
                <ListItem
                  title={v.title}
                  id={v.id}
                  image={v.image}
                  sell={v.sell}
                  price={v.price}
                ></ListItem>
              </Skeleton>
            );
          })}
        </List>
      </div>
    );
  }
  componentDidMount() {
    this.fetchList();

    // window.addEventListener('scroll', () => {
    //    // 距顶部
    //    let scrollTop = document.documentElement.scrollTop;
    //    // 可视区高度
    //    let clientHeight = document.documentElement.clientHeight;
    //    // 滚动条总高度
    //    let scrollHeight = document.documentElement.scrollHeight;


    //   if(scrollHeight - scrollTop - clientHeight < 20) {
    //     // console.log(123);
    //     this.fetchList()
    //   }
    // })
  }
}

export default Index;
